<template>
  <div ref="print">
    <a-card :bordered="false" >
       <div class="divider-content-only divider-content-center-only" >
         <div class="no-print">
           <a-divider type="vertical" class="divider-only" />打印設置
         </div>
        </div>
<!--        <a-form layout="inline">-->
<!--          <a-row :gutter="48">-->
<!--            <a-col :md="8" :sm="24">-->
<!--              <a-form-item label="字體設置">-->
<!--                <a-select placeholder="字體設置" v-model="form.size"  style="width: 100px">-->
<!--                  <a-select-option  style="width: 100px"  v-for="(item,index) in billEndGdmonthDataData" :key="index" :value="item">{{ item }}px</a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form>-->
       <div class="print-content" >
<!--          <a-row :gutter="48" class="row-a">-->
<!--            <a-col :md="8" :sm="24"></a-col>-->
<!--            <a-col :md="8" :sm="24">-->
<!--              <a-form layout="inline">-->
<!--                <a-form-item>-->
<!--                  <a-checkbox :style="fontSize" v-model="form.letterheadenable"></a-checkbox>-->
<!--                </a-form-item>-->
<!--                <a-form-item>-->
<!--                  <a-input  :style="fontSize" v-model="form.letterhead" :disabled="!form.letterheadenable"/>-->
<!--                </a-form-item>-->
<!--              </a-form>-->
<!--            </a-col>-->
<!--            <a-col :md="8" :sm="24"></a-col>-->
<!--          </a-row>-->
          <a-row :gutter="48" class="row-a">
            <a-col :md="8" :sm="24"></a-col>
            <a-col :md="8" :sm="24" style="font-family:Microsoft YaHei">
               <a-form layout="inline">
                <a-form-item>
                </a-form-item>
                <a-form-item>
                  <a-checkbox v-model="form.customerenable"><span style="font-family:Microsoft YaHei" :style="fontSize"> 租金水电收款通知单</span></a-checkbox>
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :md="8" :sm="24"></a-col>
          </a-row>
          <a-row :gutter="48" class="row-a">
            <a-col :md="8" :sm="24">
              <a-form layout="inline">
                <a-form-item >
                   <span :style="fontSize">住户：腾飞大厦-A204 </span><a-checkbox v-model="form.titleenable">-<span :style="fontSize">张文明</span></a-checkbox>
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form layout="inline">
                <a-form-item >
                   <span :style="fontSize">收租日：2021-08-28</span>
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form layout="inline">
                <a-form-item >
                  <span :style="fontSize">賬單周期：2021-08-28~2021-09-27</span>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
          <div class="print-content-item">
            <a-row :gutter="48" class="row-a">
            <a-col :md="8" :sm="24">
               <span :style="fontSize">租金：1000.00元</span>
            </a-col>
            <a-col :md="8" :sm="24" >
              <span :style="fontSize">房屋押金：2000.00元 </span>
            </a-col>
            <a-col :md="8" :sm="24">
              <span :style="fontSize">門卡押金：100.00元</span>
            </a-col>
          </a-row>
           <a-row :gutter="48" class="row-a">
            <a-col :md="8" :sm="24">
               <span :style="fontSize">電費	1.50元/度</span>
            </a-col>
            <a-col :md="8" :sm="24" >
              <span :style="fontSize">用量 100.00(0~100)</span>
            </a-col>
            <a-col :md="8" :sm="24">
              <span :style="fontSize">150.00元</span>
            </a-col>
          </a-row>
          <a-row :gutter="48" class="row-a">
            <a-col :md="6" :sm="24">
               <span :style="fontSize">水費	7.00元/噸</span>
            </a-col>
            <a-col :md="6" :sm="24" >
              <span :style="fontSize">保底 2噸</span>
            </a-col>
            <a-col :md="6" :sm="24" >
              <span :style="fontSize">用量 0.00(0~0)</span>
            </a-col>
            <a-col :md="6" :sm="24">
              <span :style="fontSize">14.00元</span>
            </a-col>
          </a-row>
          <a-row :gutter="48" class="row-a">
            <a-col :md="24" :sm="24">
               <span :style="fontSize">物業管理費：50.00元</span>
            </a-col>
          </a-row>
           <a-row :gutter="48" class="row-a">
            <a-col :md="24" :sm="24">
             <span :style="fontSize">小計：3164.00元</span>
            </a-col>
          </a-row>
          <a-row :gutter="48" class="row-a">
            <a-col :md="24" :sm="24">
               <span :style="fontSize">賬單備注</span>
            </a-col>
          </a-row>
         </div>
          <a-row  class="row-a">
            <a-col :md="8" :sm="24">
              <a-form layout="inline">
                <a-form-item>
                  <span :style="fontSize">打印日期：2019-08-30</span>
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :md="8" :sm="24" >
              <a-form layout="inline">
                <a-form-item>
                  <a-checkbox v-model="form.payerenable"></a-checkbox>  <span :style="fontSize">付款人：</span>
                </a-form-item>
                <a-form-item>
                  <a-input v-model="form.payer" :style="fontSize" :disabled="!form.payerenable"/>
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form layout="inline" >
                <a-form-item :style="fontSize">
                  <a-checkbox v-model="form.payeeenable"></a-checkbox> <span >收款人：</span>
                </a-form-item>
                <a-form-item >
                  <a-input :style="fontSize" v-model="form.payee" :disabled="!form.payeeenable"/>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
       </div>
       <a-form layout="inline" >
          <a-row :gutter="48">
            <a-col :md="20" :sm="24">
              <a-form-item label="備注" >
                <a-textarea v-model="form.remark"   style="width:400px"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
    </a-card>
    <a-card class="no-print">
      <a-button type="primary" @click="handleSubmit" :loading="loading" >
        提交保存
      </a-button>
      <a-button @click="prints" >打印預覽</a-button>
    </a-card>
  </div>
</template>
<script>
  import { busPrintSettingsEdit, busPrintSettingsOne } from '@/api/modular/main/busprintsettings/busPrintSettingsManage'
  export default {
    data () {
      return {
        loading: false,
        form: {
          id: '',
          size: '',
          letterhead: '',
          letterheadenable: true,
          customerenable: true,
          titleenable: true,
          payerenable: true,
          payer: '',
          payeeenable: true,
          payee: '',
          remark: ''
        },
        billEndGdmonthDataData: [ 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 ]
      }
    },
    computed: {
      fontSize () {
        return 'font-size:' + this.form.size + 'px'
      }
    },
    created () {
      this.getData()
    },
    methods: {
      prints () {
        this.$print(this.$refs.print) // 使用
      },
      getData () {
        busPrintSettingsOne().then((res) => {
          if (res.code === 200) {
            this.form = res.data
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      handleSubmit () {
         this.loading = true
         busPrintSettingsEdit(this.form).then((res) => {
              this.loading = false
              if (res.code === 200) {
                this.loading = false
                this.$message.success('編輯成功')
                this.getData()
              } else {
                this.loading = false
                this.$message.error('編輯失敗')//  + res.message
              }
            })
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
   .divider-only{
    background-color: aqua;
    width: 5px;
    height: 1.9em;
  }
  .divider-content-only{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .divider-content-center-only{
      margin-top: 10px;
  }
  .span-calculateStyle{
    font-size: 15px;
    margin-bottom: 20px;
  }
  .row-a{
    margin-bottom: 10px;
  }
  .print-content-item{
    border:  solid 1px #ccc;
    padding-left: 15px;
    padding-top: 6px;
  }
  .print-content{
    background-color: rgb(243, 242, 242);
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
  }
  @media print {
    @page {
      size: auto;
      margin: 0mm 10mm;
    }
  }
</style>
